<template>
  <div class="mb-8 rounded-md bg-[#232526] px-5 py-3.5" v-for="(item, index) in orderList" :key="index">
    <!--                      top-->
    <div class="border-b-[.5px] lg:flex lg:items-center justify-between border-b-[#38393a] pt-1 py-3">
      <!-- 订单状态 -->
      <div class="mb-2 lg:mb-0">
        <p class="mb-1 font-[500] whitespace-nowrap">
          {{ item.orderStatus }}
        </p>
        <p class="text-[#909292] whitespace-nowrap">{{ item.createdAt }}</p>
      </div>
      <!--      右上角按钮-->
      <div class="flex flex-wrap justify-end">
        <!--    查看商品详情-->
        <div class="rounded-2xl py-1 ml-2">
          <div
            @click="goOrderDetail(item)"
            class="flex cursor-pointer items-center rounded-2xl bg-gradient-to-r from-[#eb6767] to-red1 px-3 py-1">
            <span class="uppercase">{{ $mt('Order Detail') }}</span>
          </div>
        </div>
        <!--                    再来一单-->
        <div class="rounded-2xl py-1 ml-2" v-if="item.orderStatus !== 'PENDING'">
          <div
            @click.stop="buyAgainHandle(item)"
            class="flex cursor-pointer items-center rounded-2xl bg-gradient-to-r from-[#eb6767] to-red1 px-3 py-1">
            <span class="uppercase">{{ $mt('Buy Again') }}</span>
          </div>
        </div>
        <!--                    联系客服-->
        <div class="rounded-2xl py-1 ml-2">
          <div
            @click.stop="handleContact"
            class="flex cursor-pointer items-center rounded-2xl bg-gradient-to-r from-[#eb6767] to-red1 px-3 py-1">
            <span class="uppercase">{{ $mt('Contact') }}</span>
          </div>
        </div>
        <!--        待支付-->
        <div class="flex" v-if="item.orderStatus === 'PENDING'">
          <div class="rounded-2xl cursor-pointer py-1 ml-2">
            <span
              @click.stop="$payWithOrderInfo({ orderInfo: item, showReport: false, paymentData: item?.payment })"
              class="text-xs font-[600] flex items-center rounded-2xl bg-gradient-to-r from-[#eb6767] to-red1 px-3 py-1 whitespace-nowrap">
              {{ $calcPrice(item.totalAmountForUSD) }}
              <span class="text-xs ml-2 uppercase">{{ $mt('Pay Now') }}</span>
            </span>
          </div>
        </div>
        <!--      取消-->
        <div
          @click.stop="handleCancelOrder(item.id)"
          class="rounded-2xl py-1 ml-2"
          v-if="item.orderStatus === 'PENDING'">
          <div class="flex cursor-pointer items-center rounded-2xl bg-gradient-to-r from-[#eb6767] to-red1 px-3 py-1">
            <span class="uppercase">{{ $mt('Cancel') }}</span>
          </div>
        </div>
        <!--查看卡密-->
        <div
          @click.stop="showPassCodeData(item)"
          class="rounded-2xl py-1 ml-2"
          v-if="item.orderStatus === 'SUCCESS' && item.passCodeData">
          <div class="flex cursor-pointer items-center rounded-2xl bg-gradient-to-r from-[#eb6767] to-red1 px-3 py-1">
            <span class="uppercase">{{ $mt('Viewing Code') }}</span>
          </div>
        </div>
      </div>
    </div>
    <p v-if="item.orderStatus === 'SHIPPING_FAIL'" class="mt-2 break-words">
      {{ $mt('If your order fails to be shipped, it will be refunded and is expected to arrive within 12 hours.') }}
    </p>
    <!--                      bottom-->
    <div class="lg:mt-3 lg:flex">
      <div class="flex flex-1 shrink-0 justify-between items-end mb-3.5">
        <div class="flex flex-col flex-1 lg:w-[unset]">
          <p @click.stop="copy(item.orderId)" class="my-3.5 font-[600] text-red1 whitespace-nowrap">
            {{ item.orderId }}
          </p>
          <nuxt-link
            external
            :to="$localePath(`/goods/${item?.goodsSku?.goods?.urlName || item?.goodsSku?.goods?.id}`)"
            class="flex items-center">
            <y-image
              class="ltr:mr-2 rtl:ml-2 lg:ltr:mr-4 lg:rtl:ml-4 rounded-xs product-poster--small w-12 h-12 lg:w-14 lg:h-14"
              :src="$withPicOrigin(item?.goodsSku?.goods?.smallIcon)"
              :alt="item.goodsSku?.name"
              width="57px"
              height="57px" />
            <div>
              <div class="flex items-start">
                <h2 class="text-xs font-[600] mr-2">{{ item.goodsSku?.name }}</h2>
                <!-- <p class="shrink-0 h-4 w-8 rounded-3 bg-[#43454680] text-center leading-4">
                  x {{ item.count }}
                </p> -->
              </div>
              <p class="text-[#909292] text-xs mt-0.5">{{ item.goodsSku?.goods?.areaCode }}</p>
            </div>
          </nuxt-link>
        </div>
      </div>
      <div class="lg:flex flex-col lg:w-3/12 lg:mr-10">
        <!-- count -->
        <div class="flex items-center justify-between mb-1 lg:mb-5 pt-2 border-t border-[#38393a] lg:border-none">
          <div class="text-sm">{{ $mt('count') }}</div>
          <p class="shrink-0 h-4 w-8 rounded-xl bg-[#43454680] text-center leading-4">x {{ item.count }}</p>
        </div>
        <!-- totalAmount -->
        <div class="flex items-center justify-between">
          <span class="text-sm">{{ $mt('totalAmount') }}</span>
          <span class="font-medium text-red1">
            {{ $calcPrice(item?.totalAmountForUSD) }}
          </span>
        </div>
      </div>
    </div>
  </div>
  <!--page-->
  <footer class="flex justify-end">
    <van-pagination
      class="w-full lg:w-[200px]"
      v-model="currentPage as any"
      :total-items="orderAllList.totalElements"
      :items-per-page="orderAllList.pageSize"
      mode="simple">
      <template #prev-text>
        <van-icon name="arrow-left" />
      </template>
      <template #next-text>
        <van-icon name="arrow" />
      </template>
      <template #page="{ text }">{{ text }}</template>
    </van-pagination>
  </footer>
</template>

<script setup lang="ts">
import YImage from '~/components/logic/YImage.vue'
import { useOrderStore } from '~/store/order'
import { useClipboard } from '@vueuse/core'
import { ORDER_STATUS_LIST } from '~/utils/constants'

const orderDetailInfo = useLocalStorage('orderDetailInfo', {})
const { $mt, $pushRoute } = useCommonPlugin()
const currentPage = defineModel()
const emits = defineEmits(['refresh'])
const { text, copy, copied, isSupported } = useClipboard()
const { requestGetNew, requestPostNew } = useRequest()
const orderList = ref([])
const orderStore = useOrderStore()

const { orderAllList } = storeToRefs(orderStore)
const getOrderStatusText = (status: string) => {
  return ORDER_STATUS_LIST.find((item) => item.orderStatus === status)?.title
}
//取消订单
const handleCancelOrder = async (orderId: any) => {
  await requestPostNew(`/app/order/cancel`, { orderId }, { withAuth: true })
  emits('refresh')
}
// 去订单详情
const goOrderDetail = (item) => {
  orderDetailInfo.value = item
  return $pushRoute(`/user/order-detail?orderId=${item.id}`)
}
const buyAgainHandle = async (item) => {
  return $pushRoute(`/goods/${item?.goodsSku?.goods?.urlName || item?.goodsSku?.goods?.id}`)
}
const showPassCodeData = async (order) => {
  await showDialog({
    title: $mt('PIN CODE'),
    message: order.passCodeData,
    theme: 'round-button',
    confirmButtonText: $mt('COPY'),
  })
  copy(order.passCodeData)
}
watch(copied, (val) => {
  if (val) showToast($mt('copied'))
})
watch(
  () => orderStore.orderAllList,
  (newVal) => (orderList.value = orderStore.orderAllList.data),
  { immediate: true },
)
</script>

<style scoped lang="scss">
:deep(.van-pagination__item) {
  color: #fff;
  background: #35393b;
  border: 0;
  //border-radius: 12px;
}

:deep(.van-hairline--surround:after) {
  display: none;
}

:deep(.van-pagination__items) {
  display: flex;
}
</style>
